Ranged Area with Line

Displays a range of values over time, with a line indicating the average or median. This helps in understanding the variability and uncertainty within the data. It is useful for analyzing data with a range of values, such as stock price fluctuations, weather forecasts, or performance metrics with confidence intervals.

Chart:

Code:

  const DateTimeFormatter = DataModel.DateTimeFormatter;
  const share = muze.Operators.share;
  const sourceYears = ["01-01-1992", "01-01-2018", "01-01-2072"];
  
  muze
    .canvas()  
    .rows([[], [share("minDays", "days at or above 32 deg", "maxDays")]])
    .columns(["time"])
    .config({
      legend: {
        color: {
          value: "#bebada",
        },
      },
      gridLines: {
        x: {
          show: true,
        },
      },
      axes: {
        y: {
          domain: [180, 320],
          name: "Average number of days at or above 32˚C",
          numberOfTicks: 8,
        },
      },
    })
    .layers([
      {
        mark: "line",
        className: "line-plot-item",
        encoding: {
          y: "days at or above 32 deg",
        },
        interpolate: "catmullRom",
      },
      {
        mark: "area",
        className: "area-layer",
        encoding: {
          y: "minDays",
          y0: "maxDays",
          color: {
            value: () => "#fb8072",
          },
        },
        transition: {
          duration: 0,
        },
        interpolate: "catmullRom",
      },
      {
        mark: "text",
        className: "text-layer",
        encoding: {
          y: "days at or above 32 deg",
          text: {
            field: "time",
            formatter: (dataInfo) =>
              DateTimeFormatter.formatAs(dataInfo.rawValue, "%Y"),
          },
          color: {
            value: () => "#000",
          },
        },
        source: (dt) =>
          dt.select({
            conditions: sourceYears.map((s) => ({
              field: "time",
              value: +new Date(s),
              operator: "eq",
            })),
            operator: "or",
          }),
        encodingTransform: (points) => {
          for (let i = 0, len = points.length; i < len; i++) {
            points[i].update.y -= 10;
            if (i === 0) {
              points[i].update.x -= 30;
            }
            if (i === len - 1) {
              points[i].update.x -= 30;
            }
          }
          return points;
        },
      },
      {
        mark: "point",
        className: "anchor-indicator",
        encoding: {
          y: "days at or above 32 deg",
          size: {
            value: 100,
          },
          color: {
            value: () => "#ff0000",
          },
        },
        source: (dt) =>
          dt.select({
            conditions: sourceYears.map((s) => ({
              field: "time",
              value: +new Date(s),
              operator: "eq",
            })),
            operator: "and",
          }),
      },
      {
        mark: "tick",
        className: "tick-layer",
        encoding: {
          y: "maxDays",
          y0: "minDays",
        },
        source: (dt) =>
          dt.select({
            conditions: sourceYears.map((s) => ({
              field: "time",
              value: +new Date(s),
              operator: "eq",
            })),
            operator: "and",
          }),
      },
    ])
    .subtitle("Days at or above 32°C per year from the time you were born")